<template>
  <table class="zz-scene-table">
    <tr>
      <td class="first-col">缩放地图</td>
      <td class="secode-col">
        <el-switch v-model="enableZoom" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">倾斜相机(3D)</td>
      <td class="secode-col">
        <el-switch v-model="enableTilt" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>

    <tr>
      <td class="first-col">旋转转换位置</td>
      <td class="secode-col">
        <el-switch v-model="enableRotate" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>

    <tr>
      <td class="first-col">平移地图(2D)</td>
      <td class="secode-col">
        <el-switch v-model="enableTranslate" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>

    <tr>
      <td class="first-col">可操作南北极</td>
      <td class="secode-col">
        <el-switch v-model="constrainedAxis" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">可否进入地下</td>
      <td class="secode-col">
        <el-switch v-model="enableCollisionDetection" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>

    <tr>
      <td class="first-col">最小碰撞高度({{ minimumCollisionTerrainHeight }}米)</td>
      <td class="secode-col">
        <el-slider :min="1000" :max="100000" :step="1000" v-model="minimumCollisionTerrainHeight" placement="right" />
      </td>
    </tr>

    <tr>
      <td class="first-col">相机最近视距({{ minimumZoomDistance }}米)</td>
      <td class="secode-col">
        <el-slider :min="0.1" :max="1000" :step="1" v-model="minimumZoomDistance" placement="right" />
      </td>
    </tr>

    <tr>
      <td class="first-col">相机最远视距({{ maximumZoomDistance }}米)</td>
      <td class="secode-col">
        <el-slider :min="10000" :max="1000000" :step="10000" v-model="maximumZoomDistance" placement="right" />
      </td>
    </tr>

    <tr>
      <td class="first-col">滚轮放大倍数({{ zoomFactor }})</td>
      <td class="secode-col">
        <el-slider :min="0.1" :max="10" :step="0.1" v-model="zoomFactor" placement="right" />
      </td>
    </tr>
  </table>
</template>
<script>
export default {
  data() {
    return {
      viewer: undefined,
      enableZoom: false,
      enableTilt: false,
      enableRotate: false,
      enableTranslate: false,
      constrainedAxis: false,
      enableCollisionDetection: false,
      minimumCollisionTerrainHeight: 0,
      minimumZoomDistance: 0,
      maximumZoomDistance: 0,
      zoomFactor: 0
    };
  },
  beforeMount() {
    this.viewer = this.$store.state.viewer;
    this.settingOptions = this.viewer.zz._settingOptions;

    this.enableZoom = this.settingOptions.getOption("enableZoom");
    this.enableTilt = this.settingOptions.getOption("enableTilt");
    this.enableRotate = this.settingOptions.getOption("enableRotate");
    this.enableTranslate = this.settingOptions.getOption("enableTranslate");
    this.constrainedAxis = this.settingOptions.getOption("constrainedAxis");
    this.enableCollisionDetection = this.settingOptions.getOption("enableCollisionDetection");
    this.minimumCollisionTerrainHeight = this.settingOptions.getOption("minimumCollisionTerrainHeight");
    this.minimumZoomDistance = this.settingOptions.getOption("minimumZoomDistance");
    this.maximumZoomDistance = this.settingOptions.getOption("maximumZoomDistance");
    this.zoomFactor = this.settingOptions.getOption("zoomFactor");
  },
  watch: {
    enableZoom(newValue) {
      this.settingOptions.setOption("enableZoom", newValue);
    },
    enableTilt(newValue) {
      this.settingOptions.setOption("enableTilt", newValue);
    },
    enableRotate(newValue) {
      this.settingOptions.setOption("enableRotate", newValue);
    },
    enableTranslate(newValue) {
      this.settingOptions.setOption("enableTranslate", newValue);
    },
    constrainedAxis(newValue) {
      this.settingOptions.setOption("constrainedAxis", newValue);
    },
    enableCollisionDetection(newValue) {
      this.settingOptions.setOption("enableCollisionDetection", newValue);
    },
    minimumCollisionTerrainHeight(newValue) {
      this.settingOptions.setOption("minimumCollisionTerrainHeight", newValue);
    },
    minimumZoomDistance(newValue) {
      this.settingOptions.setOption("minimumZoomDistance", newValue);
    },
    maximumZoomDistance(newValue) {
      this.settingOptions.setOption("maximumZoomDistance", newValue);
    },
    zoomFactor(newValue) {
      this.settingOptions.setOption("zoomFactor", newValue);
    }
  }
};



</script>


<style>
@import "./sceneConfig.css"
</style>
